<template>
	<view class="content" >
		<view style="text-align: center;margin-top: 20rpx;">
		 <image src="/static/image/dan.png" style="width: 200rpx;" mode="widthFix"></image>	
		</view>
		<view class="contents box-shadow4 pr">
			<view class="pa f32" style="background: #fcbd71;border-radius: 20px;padding:10rpx 30px;left:31%;top:-26rpx;">担保交易</view>
			<view style="height: 50rpx;"></view>
			<view class="p30 f32" style="line-height: 150%;">
				平台交易服务是指为保障合作双方彼此的利益，
				甲方先将合作款项付至哦信官方交易账户，
				合作完成后，再将合作款项结算给乙方，
				保障合作双方的资金安全，营造诚信的合作环境。
			</view>
		</view>
		<view class="contents box-shadow4 pr" style="height: auto;">
			<view style="height: 50rpx;font-size: 32rpx;" class="pl30 pt20 b">交易流程</view>
			<view class="p30 f32" style="line-height: 150%;">
				<u-steps :list="numList" mode="number" :current="4" direction="column"></u-steps>
			</view>
		</view>
		<view style="height: 80px;"></view>
		<view class="guabottom disfr-lr">
			<view @click="toServers" class="guabottom-left-bom">咨询客服</view>
			<view @click="goPage" data-uri="/pages/guarantee2/guarantee2" class="guabottom-right-bom">发起交易</view>
		</view>
		<!--<loading :loading="not_load"/><!--加载状态-->
		<u-no-network tips="哎呀，网络信号丢失"></u-no-network><!--检测网络-->
	</view>
</template>

<script setup>
import { onLoad, onShow, onHide} from '@dcloudio/uni-app';
import { ref } from 'vue';	
const show_main=ref(false);
const not_load=ref(false);
const numList=ref([
	{name:'向合作方发起交易'},
	{name:'付款方支付交易款'},
	{name:'合作完成后，结算交易款至乙方账户'},
	{name:'交易完成'},
]);
const oh_signal=ref([]);
//页面加载时
onLoad(async (options)=>{
   loadPage({},false);
});

//页面显示时执行
onShow(()=>{
	//console.log('语法糖onShow');
	 //loadPage({},false);
});
//页面隐藏时执行
onHide(()=>{
	//console.log('语法糖onHide');
});
/**
 * 加载接口数据
 * @param {Object} options  参数,对像数组
 * @param {Object} isPage   是否加载大于1页
 */
const loadPage=async (options,isPage)=>{
	let ret = await uni.$get('/appapi-guarantee-stepone',options);
	if(ret.error_code != 0){
		show_main.value=true;
		not_load.value=true;
		uni.$utils.showToast(ret.info,0,()=>{
			uni.navigateBack({data:1});
		});
		return;
	}
	//console.log(ret.data);
	show_main.value=true;
	not_load.value=true;
	oh_signal.value=ret.data.oh_signal;
	
};
/**
 * 模板属性跳转页面
 * @param {Object} e
 */
function goPage(event){
	uni.$utils.dataSetPage(event);
};

// 发起客服
const toServers=()=>{
	var index = Math.floor(Math.random() * oh_signal.value.length);
	let val=oh_signal.value[index];
	if(!val) return;
	//console.log(val);return;
	let uri='';
	let conv=getConversationID(val);
	if(conv.conversationID){
		uri='/pages/chat-single/chat-single?conversationID='+conv.conversationID+'&nick='+conv.userProfile.nick+'&to='+val;
		uni.$utils.goPage(uri,0);
		return;
	}
	not_load.value=false;
	let str=uni.$appConfig['IM_PREFIX_MAKR']['da_zhao_hu']['rule']+'你好！';
	uni.TIM.createTextMessage(0,val,str,(data)=>{
		setTimeout(()=>{
			conv=getConversationID(val);
			not_load.value=true;
			if(conv.conversationID){
				uri='/pages/chat-single/chat-single?conversationID='+conv.conversationID+'&nick='+conv.userProfile.nick+'&to='+val;
				uni.$utils.goPage(uri,0);
				return;6
			}
		},500);
	});
};
//获取当前用户的会话ID
const getConversationID=(userId)=>{
	let list=uni.$vuex.state.globalData.conversationList;
	for(let i in list){
		if(list[i].type != 'C2C') continue;
		if(list[i].userProfile.userID == userId){
			return list[i];
		}
	}
	return {};
};
</script>

<style  lang="scss">
	page {
		background: #2979ff;
	}
	.contents{
		width:660rpx;
		height: 200px;
		margin: 30rpx auto;
		background: #fff;
		border-radius: 6px;
	}
	.guabottom{
		position: fixed;
		bottom:0;
		left:0;
		background: #fff;
		height: 140rpx;
		width: 100%;
		padding: 20rpx 40rpx;
	}
	.guabottom-left-bom,.guabottom-right-bom{
		width: 320rpx;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 32rpx;
		border: 2px #0088fe solid;
		color:#0088fe;
		text-align: center;
		border-radius: 4px;
	}
	.guabottom-right-bom{
		border:none;
		color:#fff;
		background: #0088fe;
	}
</style>
